<template>
  <div class="top">
       <van-nav-bar
      class="head"
      title="评分一"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
    />
    <p>您在多大程度上愿意向您的亲朋好友推荐</p>
    <p>良品铺子</p>
    <div>
      <van-image
        width="100"
        height="100"
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fm.yifen.com%2Fimg%2Ffiles%2F2019%2F3%2Fb05aad33-778e-48c3-b1b5-b450f303f015.jpg&refer=http%3A%2F%2Fm.yifen.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642817774&t=7068afe63adc474b3c5dccdcfb5797ee"
      />
    </div>
    <div class="middle">
      <p>根据推荐的意愿程度在0~10分之间来打分</p>
      <p>评分在9~10分之间，为推荐者！</p>
      <p>评分在7~8分之间，为被动者！</p>
    </div>
    <div class="bottom">
      <van-grid :gutter="14" :column-num="5">
        <van-grid-item
          v-for="(item, index) in list"
          :key="index"
          @click="qiehuan"
          :text="item.num"
        />
      </van-grid>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        { num: "0" },
        { num: "1" },
        { num: "2" },
        { num: "3" },
        { num: "4" },
        { num: "5" },
        { num: "6" },
        { num: "7" },
        { num: "8" },
        { num: "9" },
        { num: "10" },
      ],
    };
  },
  methods: {
    qiehuan() {
      this.$router.push({ path: "/NPSscore2" }).catch((error) => error);
    },
        onClickLeft() {
      this.$router.push({ path: "/mouth" }).catch((error) => error);
    },
  },
};
</script>

<style scoped lang="less">
.top {
  margin: 90px auto;
  text-align: center;
  font-size: 16px;
  width: 302px;
  height: 48px;
  .head {
  width: 100%;
  height: 51px;
  color: rgba(80, 80, 80, 1);
  background-color: rgba(239, 239, 239, 1);
  position: fixed;
  top: 0;
  left: 0;
}
/deep/.van-nav-bar .van-icon {
  color: rgba(153, 153, 153, 1);
}
/deep/.van-nav-bar__title {
  color: rgba(42, 131, 78, 1);
  font-size: 18px;
}
  .van-image {
    margin-top: 20px;
    width: 150px;
    height: 150px;
  }
  .middle {
    p {
      margin: 0;
      padding: 5px;
      font-size: 14px;
      text-align: left;
      margin: 10px 0;
    }
  }
  .bottom {
    margin-left: -37px;
    background-color: rgba(229, 229, 229, 1);
    padding: 0 39px;
    padding-top: 14px;
    padding-bottom: 23px;
    box-sizing: border-box;
    width: 375px;
    height: 125px;
    font-size: 14px;
    margin-top: 137px;
    .van-grid {
      width: 100%;
      font-size: 12px;
      padding-left: 0;
      .van-grid-item {
        width: 48px;
        height: 24px;
        overflow: hidden;
        margin-top: 8px !important;
        /deep/.van-grid-item__content{
          padding: 0 !important;
        }
       
      }
    }
  }
}
</style>